<template>
  <div class="page-wrapper">
    <div class="page-container">
      <!-- 查询栏 -->
      <div class="search-container">
        <div class="search-left">
          <el-form :inline="true" :model="searchForm">
            <el-form-item label="部门名称">
              <el-input 
                v-model="searchForm.deptName" 
                placeholder="请输入部门名称"
                clearable
                style="width: 240px;"
              />
            </el-form-item>
            <el-form-item label="状态">
              <el-select 
                v-model="searchForm.status" 
                placeholder="请选择状态"
                clearable
                style="width: 150px;"
              >
                <el-option label="正常" value="正常" />
                <el-option label="停用" value="停用" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="search-right">
          <el-button type="primary" @click="handleSearch" style="width: 80px;">
            <i class="el-icon-search"></i>
            搜索
          </el-button>
          <el-button @click="handleReset" style="width: 80px;">
            <i class="el-icon-refresh"></i>
            清空
          </el-button>
        </div>
      </div>
      
      <!-- 分割线 -->
      <div class="divider"></div>

      <!-- 添加按钮 -->
      <div class="action-container">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加部门</el-button>
      </div>

      <!-- 数据表格 -->
      <div class="table-container">
        <el-table 
          :data="tableData" 
          style="width: 100%"
          stripe
          border
        >
          <el-table-column 
            type="index" 
            label="序号" 
            width="80" 
            align="center"
          />
          <el-table-column 
            prop="deptName" 
            label="部门名称" 
            align="center"
          />
          <el-table-column 
            prop="status" 
            label="状态" 
            align="center"
            width="100"
          >
            <template #default="scope">
              <span :class="scope.row.status === '正常' ? 'status-normal' : 'status-disabled'">
                {{ scope.row.status }}
              </span>
            </template>
          </el-table-column>
          <el-table-column 
            prop="lastModifyTime" 
            label="最后修改时间" 
            align="center"
          />
          <el-table-column 
            label="操作" 
            align="center"
            width="160"
          >
            <template #default="scope">
              <el-button type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
              <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <div class="pagination-info">
          共 {{ total }} 条记录 第 {{ currentPage }}/{{ totalPages }} 页
        </div>
        <div class="pagination-controls">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="prev, pager, next, sizes, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

      <!-- 添加/编辑部门对话框 -->
      <el-dialog 
        v-model="dialogVisible" 
        :title="dialogType === 'add' ? '添加部门' : '编辑部门'"
        width="400px"
      >
        <el-form 
          :model="form" 
          :rules="rules" 
          ref="formRef"
          label-width="80px"
        >
          <el-form-item label="部门名称" prop="deptName">
            <el-input v-model="form.deptName" placeholder="请输入部门名称" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" placeholder="请选择状态">
              <el-option label="正常" value="正常" />
              <el-option label="停用" value="停用" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索表单
const searchForm = reactive({
  deptName: '',
  status: ''
})

// 分页数据
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(20)

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(total.value / pageSize.value)
})

// 表单数据
const form = reactive({
  deptName: '',
  status: '正常',
  id: ''
})

// 表单验证规则
const rules = reactive({
  deptName: [
    { required: true, message: '请输入部门名称', trigger: 'blur' }
  ],
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ]
})

const formRef = ref()
const dialogVisible = ref(false)
const dialogType = ref('add')

// 模拟数据
const tableData = ref([
  { id: 1, deptName: '咨询部', status: '正常', lastModifyTime: '2025-01-21 08:50:08' },
  { id: 2, deptName: '营销部', status: '正常', lastModifyTime: '2025-01-21 08:50:08' },
  { id: 3, deptName: '开拓投资部', status: '停用', lastModifyTime: '2025-01-21 08:50:08' },
  { id: 4, deptName: '技术中心', status: '正常', lastModifyTime: '2025-01-21 08:50:08' },
  { id: 5, deptName: '人事部', status: '正常', lastModifyTime: '2025-01-21 08:50:08' },
  { id: 6, deptName: '行政部', status: '停用', lastModifyTime: '2025-01-21 08:50:08' },
  { id: 7, deptName: '财务部', status: '正常', lastModifyTime: '2025-01-21 08:50:08' },
  { id: 8, deptName: '后勤部', status: '正常', lastModifyTime: '2025-01-21 08:50:08' },
  { id: 9, deptName: '信息中心', status: '停用', lastModifyTime: '2025-01-21 08:50:08' },
  { id: 10, deptName: '后勤部门', status: '正常', lastModifyTime: '2025-01-21 08:50:08' }
])

// 搜索方法
const handleSearch = () => {
  ElMessage.success('搜索功能已触发')
  // 实际项目中这里应该调用API获取数据
}

// 重置方法
const handleReset = () => {
  searchForm.deptName = ''
  searchForm.status = ''
  ElMessage.success('搜索条件已重置')
}

// 添加部门
const handleAdd = () => {
  dialogType.value = 'add'
  form.deptName = ''
  form.status = '正常'
  form.id = ''
  if (formRef.value) {
    formRef.value.resetFields()
  }
  dialogVisible.value = true
}

// 编辑部门
const handleEdit = (row) => {
  dialogType.value = 'edit'
  form.deptName = row.deptName
  form.status = row.status
  form.id = row.id
  dialogVisible.value = true
}

// 删除部门
const handleDelete = (row) => {
  ElMessageBox.confirm(
    `确定要删除部门「${row.deptName}」吗？`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('删除成功')
    // 实际项目中这里应该调用API删除数据
  }).catch(() => {
    // 用户取消删除
  })
}

// 提交表单
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      dialogVisible.value = false
      const message = dialogType.value === 'add' ? '添加成功' : '修改成功'
      ElMessage.success(message)
      // 实际项目中这里应该调用API保存数据
    }
  })
}

// 分页大小改变
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  // 实际项目中这里应该调用API重新获取数据
}

// 当前页码改变
const handleCurrentChange = (current) => {
  currentPage.value = current
  // 实际项目中这里应该调用API重新获取数据
}
</script>

<style scoped>
/* 页面外层容器 */
.page-wrapper {
  background-color: #f0f2f5;
  padding: 20px;
  min-height: 100vh;
}

/* 页面内容容器 */
.page-container {
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 搜索栏样式 */
.search-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.search-left {
  display: flex;
  align-items: center;
}

.search-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 分割线样式 */
.divider {
  height: 1px;
  background-color: #e0e0e0;
  margin: 0 20px;
}

/* 操作栏样式 */
.action-container {
  padding: 20px;
  padding-bottom: 10px;
}

/* 表格样式 */
.table-container {
  padding: 0 20px 20px 20px;
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-top: 1px solid #ebeef5;
}

.pagination-info {
  color: #606266;
}

/* 状态标签样式 */
.status-normal {
  color: #67c23a;
  font-weight: 500;
}

.status-disabled {
  color: #f56c6c;
  font-weight: 500;
}

/* 按钮样式调整 */
.search-right .el-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* 表格操作按钮样式 */
.table-container .el-table__fixed-right .el-button {
  margin-right: 8px;
}
</style>